<div class="section">
  <div class="heading">
    <div class="title"><strong>行内代码</strong></div>
  </div>
  <div class="box">
    <p>使用 <code>&lt;code&gt;</code>。</p>
    <div class="box outline">
      这是行内代码示例：<code>Hello world!</code>
    </div>
  </div>
  <pre class="prettyprint"><code>&lt;p&gt;&#x8fd9;&#x662f;&#x884c;&#x5185;&#x4ee3;&#x7801;&#x793a;&#x4f8b;&#xff1a;&lt;code&gt;Hello world!&lt;/code&gt;&lt;/p&gt;</code></pre>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>等宽字体</strong></div>
  </div>
  <div class="box">
    <p>使用 <code>.code</code>。</p>
    <div class="box outline">
      <h2 class="code no-margin">Hello code！</h2>
    </div>
  </div>
  <pre class="prettyprint"><code>&lt;h2 class=&quot;code&quot;&gt;Hello code&#xff01;&lt;/h2&gt;</code></pre>
</div>


<div class="section">
  <div class="heading">
    <div class="title"><strong>键盘文本</strong></div>
  </div>
  <div class="box">
    <p>使用 <code>&lt;kbd&gt;</code>。</p>
    <div class="box outline">
      按 <kbd>Ctrl + F9</kbd> 来截取屏幕。
    </div>
  </div>
  <pre class="prettyprint"><code>&lt;p&gt;&#x6309; &lt;kbd&gt;Ctrl + F9&lt;/kbd&gt; &#x6765;&#x622a;&#x53d6;&#x5c4f;&#x5e55;&#x3002;&lt;/p&gt;</code></pre>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>代码块</strong></div>
  </div>
  <div class="box">
    <p>使用 <code>&lt;pre&gt;</code>。</p>
    <pre><code>&lt;html&gt;
&lt;body&gt;
  &lt;h1&gt;Hello &lt;strong&gt;MZUI&lt;/strong&gt;!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
  </div>
  <pre class="prettyprint"><code>&lt;pre&gt;&lt;code&gt;&amp;lt;html&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;h1&amp;gt;Hello &amp;lt;strong&amp;gt;MZUI&amp;lt;/strong&amp;gt;!&amp;lt;/h1&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>代码高亮</strong></div>
  </div>
  <div class="box article">
    <p>代码高亮推荐方案：</p>
    <ul>
      <li><a href="https://github.com/google/code-prettify" target="_blank">Google code prettify</a></li>
      <li><a href="https://highlightjs.org/" target="_blank">highlight.js</a></li>
    </ul>
    <pre class="prettyprint linenums"><code>&lt;html&gt;
&lt;body&gt;
  &lt;h1&gt;Hello &lt;strong&gt;MZUI&lt;/strong&gt;!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
  </div>
</div>
